<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorate="~{manage/layout}" lang="zh">
<head>
    <title>[[${site.title}]]</title>
</head>
<body>
<div layout:fragment="main-container" class="main-container">
    首页
</div>
<div layout:fragment="script">
    <script type="text/javascript" th:inline="javascript">
      $(function() {
        function Menu(id, pId, name) {
          return {id: id, pId: pId, name: name};
        }

        let mdcTree = $('#mdcTree').mdcTree({
          data: [
            Menu(1, null, '顶级菜单'),
            Menu(2, 1, '一级菜单1-1'),
            Menu(3, 1, '一级菜单1-2'),
            Menu(4, 2, '二级菜单2-1')],
          id: 'id',
          parentId: 'pId',
          label: 'name',
          icon: 'icon',
          expandAll: false,
          checkbox: true,
          toggleEvt: function() {
            console.log('已选择项', mdcTree.getSelectItems());
          },
        });
        console.log(' log: ', mdcTree);
      });
    </script>
</div>
</body>
</html>
